<template>
  <div class="inputminiPadding">
    <!-- 多系列循环 -->
    <div v-for="(item,index) in xAxisData" :key="'item' + index" style="padding-bottom: 10px;">
      <div class="attr-item-edit-wrapper" v-for="(item2,index2) in seriesData" :key="'item' + index2">
        <template v-if="listType==1 || listType==2">
          <div class="flexG-1 attr-item-edit-input">
            <div class="flexGrowTitle">x</div>
            <el-input placeholder="x" v-model="xAxisData[index]" size="mini" class="input-with-select">
            </el-input>
          </div>
          <div class="flexG-1 attr-item-edit-input">
            <div class="flexGrowTitle">y</div>

            <el-input placeholder="y" v-model.number="seriesData[index2].data[index]" size="mini" class="input-with-select">
            </el-input>
          </div>
          <div class="flexG-1 attr-item-edit-input" v-if="listType==2">
            <div class="flexGrowTitle">z</div>

            <el-input placeholder="系列名" v-model="seriesData[index2].name" size="mini" class="input-with-select">
            </el-input>
          </div>
        </template>
        <template v-else>
          <div class="flexG-1 attr-item-edit-input">
            name
          </div>
          <div class="flexG-1 attr-item-edit-input" v-for="item in seriesData" :key="item.name">
            <el-input placeholder="x" v-model="num" size="mini" class="input-with-select">
            </el-input>
          </div>
        </template>
        <div class="closeBtn" @click="removeItem(index)">
          <i class="el-icon-delete"></i>
        </div>
      </div>
    </div>

    <div class="attr-item-edit-wrapper" v-if="listType==3" v-for="(item,index) in xAxisData" :key="'item' + index">
      <div class="flexG-1 attr-item-edit-input">
        行{{index+1}}
      </div>
      <div class="flexG-1 attr-item-edit-input" v-for="item in seriesData" :key="item.name">
        <el-input placeholder="" v-model="num" size="mini" class="input-with-select">
        </el-input>
      </div>
      <div class="closeBtn" @click="removeItem(index)">
        <i class="el-icon-delete"></i>
      </div>
    </div>
    <div class="addBtn">
      <el-button type="text" @click="addItem()">
        <i class="el-icon-circle-plus-outline"></i> 添加
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  // listType 列表类型 1 双列x.y   2 三列x.y.name   3  多列
  props: ['seriesData','xAxisData','listType'],
  data() {
    return {
      num: 500,
      addNum:0
    }
  },
  methods: {
    addItem() {
      this.$emit('addItem', 'addItem')
      this.addNum++

      this.xAxisData.push('新增' + this.addNum)
      this.seriesData.forEach(element => {
        element.data.push(0)
      });
    },
    removeItem(index) {
      // this.$emit('removeItem', index)
      this.xAxisData.splice(index, 1)
      this.seriesData.forEach(element => {
        element.data.splice(index, 1)
      });
    }
  },
  mounted() {
  },
}
</script>
<style lang="scss">
  .inputminiPadding {
    .el-input__inner {
      padding: 0 6px;
    }
    padding-bottom: 70px;
  }
</style>
<style lang="scss" scoped>
  .closeBtn{
    padding-left: 10px;
  }
  .addBtn {
    text-align: center;
  }

  .attr-item-edit-wrapper {
    // padding-left: 18px;
    align-items: center;
    display: flex;
    width: 100%;
    // text-align: center;
    padding-bottom: 6px;

    .attr-item-title {
      text-align: left;
      min-width: 60px;
      font-size: 12px;
    }

    .attr-item-edit-input {
      display: flex;
      align-items: flex-end;

      .flexGrowTitle {
        padding-right: 4px;
      }

      &.flexG-1 {
        flex-grow: 1;
        margin-left: 10px;
      }

      .attr-item-edit-input-des {
        text-align: center;
        line-height: 1;
        margin-top: 2px;
        font-size: 12px;
        color: $gray;
      }
    }
  }
</style>